<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态页面</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        <!--#id选择器-->
        #nbaPlay{
            width:250px;
            margin:auto;
        }
        
        #curry,
        #abc{
            float:left;
            height:178px;
            width:112px;
            border:1px rgba(0,0,0,0.12) solid;
            margin:5px;
        }
        <!--class选择器-->
        .teamImg{
            width:16px;
            height: 16px;
        }
        
        #abc,
        #abcImg,
        #curry,
        #curryImg{
            border-radius:10px;
            text-align:center;
        }
        
        .name{
            font-size:14px;
        }
        
        .team,
        .type{
            font-size:12px;
            color:#70757a;
        }
    </style>
</head>

<body>
    <div id="nbaPlay">
        <div id="curry">
            <img src="" alt="" id="curryImg"><!--Img1-->
            <br><span class="name"></span><br><!--playName[0]-->
            <span class="type"></span><br><!--type[0]-->
            <img src="" class="teamImg" alt=""><!--teamImg[0]-->
            <span class="team"></span><!--team[0]-->
        </div>
        <div id="abc">
            <img src="" alt="" id="abcImg"><!--Img2-->
            <br><span class="name"></span><br>
            <span class="type"></span><br><img src="" class="teamImg" alt="">
            <span class="team"></span>
        </div>
    </div>
</body>
<script>
    //构造器：Star
    function Star(name,type,team,personImg,teamImg){
        this.name=name;
        this.type=type;
        this.team=team;
        this.personImg=personImg;
        this.teamImg=teamImg;
    }
    //使用构造器实例化对象 curry
    var curry =new Star('curry','控球后卫','金州勇士','img/curryImg.jpg','img/curryImg.png');
    //页面动态赋值
    var Img1= document.getElementById('curryImg');
    Img1.src=curry.personImg;
    var playName=document.getElementsByClassName('name');
    playName[0].innerHTML=curry.name;
    var type =document.getElementsByClassName('type');
    type[0].innerHTML=curry.type;
    var teamImg=document.getElementsByClassName('teamImg');
    teamImg[0].src=curry.teamImg;
    var team = document.getElementsByClassName('team');
    team[0].innerHTML = curry.team;

    //实例化对象 ABC
    var ABC=new Star('ABC','前锋','密尔沃基雄鹿','img/ABC.jpg','img/ABC.png');
    //页面动态赋值
    var Img2=document.getElementById('abcImg');
    Img2.src=ABC.personImg;
    var playName=document.getElementsByClassName('name');
    playName[1].innerHTML=ABC.name;
    var type =document.getElementsByClassName('type');
    type[1].innerHTML=ABC.type;
    var teamImg=document.getElementsByClassName('teamImg');
    teamImg[1].src=ABC.teamImg;
    var team = document.getElementsByClassName('team');
    team[1].innerHTML = ABC.team;
</script>
© 版圚由fzk归属，未经允许不得复制、镜像
</html>